<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{index}}---{{ p.name }}---{{p.age}}
            ---
            <button @click="deleteP(index)">删除</button>
            ---
            <button @click="updateP(index,{name:'cat',age:100})">更新</button>
        </li>
    </ul>
    <h2>测试: v-for 遍历对象</h2><!-- 遍历对象很少使用、了解即可 -->
    <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
            {{value}}---{{key}}
        </li>
    </ul>


</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    // TODO https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95 数组更新检测的变异方法（说白了就是这些方法不再是原生的js方法，vue重写了）
    // TODO 重写逻辑，1.调用数组原有方法 2. 更新model
    // vue 本身只是监视了persons的改变，没有监视数组内部数据的改变
    // vue 重写了数组中的一系列改变数组内部数据的方法（先调用原生的，在更新界面） ----> 数组内部改变，界面自动变化
    new Vue({
        el: '#demo',
        data: {
            persons: [ // vue 本身只是监视了persons的改变，没有监视数组内部数据的改变（这么说也不太对）
                {name: 'tom0', age: 10},
                {name: 'tom1', age: 12},
                {name: 'tom2', age: 14},
            ]
        },
        methods: {
            deleteP(index) {
                console.log(index);
                // 删除persons中指定index的p
                this.persons.splice(index, 1);
            },
            updateP(index, person) {
                // 并不会改变persons本身 ，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
                // this.persons[index] = person;
                this.persons.splice(index, 1, person);
                // this.persons = []; 这样子也可以更新

            }
        }
    })
</script>
</body>
</html>